* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bigCircle {
    width: 500px;
    height: 700px;
    margin: 5% auto;
    position: relative;
}

#upCircle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: relative;
    box-shadow: 10px 10px 150px rgb(255, 0, 0) inset;

    @keyframes rotate3d {
        0% {
            transform: rotateZ(-15deg) rotateY(0deg);
        }

        100% {
            transform: rotateZ(-15deg) rotateY(360deg);
        }
    }

    .ball {
        height: 100%;
        transform-style: preserve-3d;
        animation: rotate3d 6s linear infinite;
    }

    .ball>li {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .ball .line1 {
        transform: rotateY(0deg);
        text-align: center;
        border: 3px solid red;
        line-height: 100px;
        font-size: 30px;
        color: red;
    }

    span {
        display: inline-block;
    }

    .ball .line2 {
        transform: rotateY(60deg);
        border: 3px solid red;
    }

    .ball .line3 {
        transform: rotateY(120deg);
        border: 3px solid red;
    }

    .ball .line4 {
        transform: rotateY(180deg);
        border: 3px solid red;
    }

    .ball .line5 {
        transform: rotateY(240deg);
        border: 3px solid red;
    }

    .ball .line6 {
        transform: rotateY(300deg);
        border: 3px solid red;
    }

    .ball-box {
        width: 100px;
        height: 100px;
        perspective: 3000px;
        position: absolute;

    }

    .ball-box:nth-of-type(1) {
        left: 10%;
        top: 25%;
    }

    .ball-box:nth-of-type(2) {
        left: 10%;
        top: 55%;
    }

    .ball-box:nth-of-type(3) {
        right: 10%;
        top: 25%;
    }

    .ball-box:nth-of-type(4) {
        right: 10%;
        top: 55%;
    }

    .ball-box:nth-of-type(5) {
        top: 5%;
        left: 40%;
    }

    .ball-box:nth-of-type(6) {
        top: 70%;
        left: 40%;
    }

    .ball-box:nth-of-type(7) {
        top: 40%;
        left: 40%;

        .ball {
            height: 100%;
            transform-style: preserve-3d;
            animation: rotate3d 6s linear infinite;
        }

        .ball>li {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .ball .line1 {
            transform: rotateY(0deg);
            text-align: center;
            border: 3px solid blue;
            line-height: 100px;
            font-size: 30px;
            color: blue;
        }

        span {
            display: inline-block;
        }

        .ball .line2 {
            transform: rotateY(60deg);
            border: 3px solid blue;
        }

        .ball .line3 {
            transform: rotateY(120deg);
            border: 3px solid blue;
        }

        .ball .line4 {
            transform: rotateY(180deg);
            border: 3px solid blue;
        }

        .ball .line5 {
            transform: rotateY(240deg);
            border: 3px solid blue;
        }

        .ball .line6 {
            transform: rotateY(300deg);
            border: 3px solid blue;
        }
    }
}



#downCircle {
    width: 300px;
    height: 100px;
    position: absolute;
    top: 450px;
    left: 100px;
    background: red;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    color: #fff;
}

#footCircle {
    width: 500px;
    height: 50px;
    margin-top: 100px;
    line-height: 50px;
    font-size: 20px;
    font-weight: 600;

    p {
      border: 2px dotted gold;
        span {
            width: 30px;
            height: 30px;
            border:2px solid red;
            border-radius: 50%;
            display: inline-block;
            color: red;
            text-align: center;
            margin-left: 20px;
            line-height: 30px;
            &:nth-of-type(7){
                border:2px solid blue;
                color: blue;
            }
        }
    }
}